<template>
    <div>
        <el-dialog :title="passTitle" :visible.sync="passExamDialogVisible" width="400px">
            <div class="flex align-center">
                <i :class="passFlag?'el-icon-success text-success':'el-icon-error text-error'" style="font-size: 40px; "></i>
                <span class="font-16">{{passTitle }}</span>
            </div>
            
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="passExamDialogVisible=false">确 定</el-button>
            </span>
        </el-dialog>
    
    
        <el-drawer title="" :visible.sync="visible" :with-header="false" size="650px">
            <div class="right-container">
                <div class="container-header">
                    <div style="font-size: 14px">开始考试【{{ examItem.name }} {{examItem.examItemList.length }}/{{examItem.examItemList.length}}】</div>
                    <div @click="handleAddExamClose">
                        <i class="el-icon-close" style="font-size: 18px"></i>
                    </div>
                </div>
                <div class="container-content background-color-grey padding-10">
                    <div class="background-color-white padding-10">
                        <el-card v-for="(item, index) in examItem.examItemList" class="box-card addExamCard margin-top-sm"
                            :key="item.name">
                            <div class="padding-bottom-md">
                                <div style="min-height: 40px;line-height: 30px"
                                    class="flex justify-between align-center border-bottom padding-lr-sm">
                                    <div class="flex-1 text-16">{{ index + 1 }}、{{ item.name }}</div>
                                    <div class="flex-1 text-right">{{item.ans.indexOf(',')!=-1?'多选':'单选'}}</div>
                                </div>
                                <div class="flex-column justify-between padding-lr-lg">
                                    <div class="padding-lg cursor-pointer margin-tb-sm"
                                        v-if="item.a"
                                        :class="item.myselfAns&&item.myselfAns.indexOf('a')!=-1 ? 'bg-green text-white' : ''"
                                        @click="changeAns(item,'a')">
                                        A.&nbsp;{{ item.a }}
                                    </div>
                                    <div class="padding-lg cursor-pointer  margin-tb-sm"
                                        v-if="item.b"
                                        :class="item.myselfAns&&item.myselfAns.indexOf('b')!=-1 ? 'bg-green text-white' : ''"
                                        @click="changeAns(item,'b')">
                                        B.&nbsp;{{ item.b }}
                                    </div>
                                    <div class="padding-lg cursor-pointer  margin-tb-sm"
                                        v-if="item.c"
                                        :class="item.myselfAns&&item.myselfAns.indexOf('c')!=-1 ? 'bg-green text-white' : ''"
                                        @click="changeAns(item,'c')">
                                        C.&nbsp;{{ item.c }}
                                    </div>
                                    <div class="padding-lg cursor-pointer  margin-tb-sm"
                                        v-if="item.d"
                                        :class="item.myselfAns&&item.myselfAns.indexOf('d')!=-1 ? 'bg-green text-white' : ''"
                                        @click="changeAns(item,'d')">
                                        D.&nbsp;{{ item.d }}
                                    </div>
                                </div>
                            </div>
                        </el-card>
    
                    </div>
                </div>
                <div class="flex justify-center padding-10">
                    <el-button @click="handleAddExamClose">返回</el-button>
                    <!-- <el-button type="primary" @click="addExamSubmit">保存</el-button> -->
                </div>
            </div>
        </el-drawer>
    </div>
    
</template>

<script>
export default {
    name: 'exam-user',
    data() {
        return {
            passExamDialogVisible:false,
            passFlag: false,
            passTitle:"",
            examItem: {
                examItemList: []
            },
            visible: false,
            id: 0,
        }
    },
    mounted() {
        console.log(document.body.clientHeight)
    },
    created() {
    },
    methods: {
        changeAns(item,ans){
            console.log(item)
            //先判断是单选还是多选
            if(item.ans.indexOf(',')!=-1){
                //多选
                item.myselfAns = item.myselfAns||''
                 //ans用逗号分割
                let currentAns =  item.myselfAns.split(",")
                //判断ans是否在currentAns中，如果在，移除，不在，添加
                if (currentAns.includes(ans)) {
                    currentAns = currentAns.filter(item => item !== ans)
                } else {
                    currentAns.push(ans)
                }
                let options = ["a","b","c","d"]
                //将currentAns按照options顺序排序，重新拼接字符串
                currentAns = options.filter(item => currentAns.includes(item)).join(",")
                item.myselfAns = currentAns
            }else{
                //单选
                item.myselfAns = ans
            }
            console.log(item.myselfAns)

           
        },

        handleAddExamClose() {
            this.visible = false
        },
        init(id) {
            console.log(id)
            this.id = id || 0
            this.visible = true
            if (this.id) {
                //loading
                this.$loading({
                    lock: true,
                    text: "加载中",
                    background: "rgba(0, 0, 0, 0.5)",
                });
                //获取考试数据/class/exam/info/{id}
                this.$http({
                    url: this.$http.adornUrl(`/class/exam/info/${this.id}`),
                    method: 'get',
                    params: this.$http.adornParams()
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        console.log(data)
                        this.examItem = data.classExam

                    }
                    this.$loading().close();
                }).catch((err) => {
                    this.$loading().close();
                });
            } else {
            }
        },
        // 表单提交
//         addExamSubmit() {
//             this.examItem.userId = this.userInfo.userId
//             this.examItem.userName = this.userInfo.userName
//             this.examItem.userPhone = this.userInfo.userPhone
//             console.log(this.examItem)
// //验证答案是否都已经选择
//             for (let i = 0; i < this.examItem.examItemList.length; i++) {
//                 if (!this.examItem.examItemList[i].myselfAns) {
//                     this.$message({
//                         message: '请选择答案',
//                         type: 'warning'
//                     })
//                     return
//                 }
//             }

//             this.$http({
//                 url: this.$http.adornUrl(`/class/exam/itemConfig`),
//                 method: 'post',
//                 data: this.$http.adornData(this.examItem)
//             }).then(({ data }) => {
//                 if (data && data.code === 0) {
//                     console.log("考试完成", data)
//                     let res = data.classExamUser;
//                     //判断考试是否通过
//                     if(Number(res.score)>=Number(this.examItem.passScore)){
//                         this.passTitle = "恭喜您！通过考试"
//                         this.passFlag = true;
//                     }else{
//                         this.passTitle = "很遗憾！未通过考试"
//                         this.passFlag = false;
//                     }
//                     this.handleAddExamClose();
//                     this.passExamDialogVisible = true
//                     //刷新列表
//                     this.$emit('refreshDataList')

//                 }
//             })




//         }
    }
}
</script>
<style>
.right-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.container-header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px
}

.container-content {
    flex: 1;
}


.flex-container {
    display: flex;
    justify-content: space-between;
    /* 根据需要调整 */
}

.flex-item {
    flex: 1;
    /* 可以根据需要调整比例 */
    margin: 0 10px;
    /* 添加一些间距 */
}

.left-panel,
.right-panel {
    /* 在这里添加任何特定的样式，比如背景色、边框等 */
}

.el-tabs--border-card>.el-tabs__content {
    padding: 10px 0;
}

.el-radio__original {
    display: none;
}

.addExamCard>.el-card__body {
    padding: 0px;
}
</style>